<template>
  <div class="collect">
    <header>
      <BaseNavBar title="我的收藏" :is-nav="true" />
    </header>
    <main class="collect_main">

      <Card v-for="item in collectList" :key="item?.id">
        <section class="collect_main_item" @click="handleLookDetail(item)">
          <section class="collect_main_item_img">
            <van-image width="100" height="100" :src="item?.cover" v-if="item?.cover" />
          </section>
          <section class="collect_main_item_info">
            <section class="collect_main_item_title"> {{ item?.title }}</section>
            <section class="collect_main_item_content van-multi-ellipsis--l3"> {{ item?.content }}</section>
            <section class="collect_main_item_time"> 收藏时间：{{ item?.createTime }}</section>
          </section>
        </section>
      </Card>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router';
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import Card from '@/components/Card/index.vue';
import { getCollectList } from '@/apis/collect';


const router = useRouter();
const collectList = ref([]);

const init = async () => {
  try {
    const res = await getCollectList();
    if (res?.code === 200) {
      collectList.value = res?.data?.list;

    }
  } catch (error) {
    console.log(error, 'collect-list-error');

  }
};
const handleLookDetail = (item) => {
  router.push(`/post/detail/${item?.postId}`);
};

onMounted(() => {
  init();
})
</script>

<style lang="less" scoped>
.collect {
  &_main {
    margin-top: 8px;

    &_item {
      margin-top: 8px;
      box-sizing: border-box;
      padding: 8px;
      display: flex;
      &_info{
        margin-left: 8px;
      }

      &_title {
        font-size: 16px;
        color: #333;
      }

      &_content {
        font-size: 14px;
        color: #999;
      }
      &_time {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
